<template>
    <div class="renyuan-bg">
        <GisplusTitle>
            <div class="dropdownmenu" slot="dropdownmenu">
                <el-dropdown @command="handleCommand" trigger="click">
                        <span class="el-dropdown-link">
                          {{value6}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-for="item in cities"
                                          :key="item.value"
                                          :label="item.label"
                                          :command="item.label"
                                          :value="item.value">{{item.label}}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </GisplusTitle>
        <div class="renyuan-box-left flex-column-center">
            <div class="renyuan-box1 renyuan-box">
                <div class="renyuan-box-title">现场人数</div>
                <div class="renyuan-img">
                    <img src="@/assets/img/环状图@0.5x.png" alt="">
                    <div class="renyuan-num">88</div>
                    <div class="renyuan-text">项目登记人数</div>
                </div>
                <div style="display: flex;justify-content: space-around">
                    <div class="renyuan-img">
                        <img src="@/assets/img/环状图红色@0.5x.png" alt="">
                        <div class="renyuan-num">88</div>
                        <div class="renyuan-text">今日出勤人数</div>
                    </div>
                    <div class="renyuan-img">
                        <img src="@/assets/img/环状图蓝色@0.5x.png" alt="">
                        <div class="renyuan-num">88</div>
                        <div class="renyuan-text">现场实时人数</div>
                    </div>
                </div>
            </div>
            <div class="renyuan-box2 renyuan-box">
                <div class="renyuan-box-title">交底/教育情况</div>
                <echarts id="renyuan" :option="renyuan" :styles="gongzhongstyle"></echarts>
            </div>
        </div>
        <div class="renyuan-box-mid flex-column-center">
            <div class="renyuan-box3 renyuan-box">
                <div class="renyuan-box-title"
                     style="display: flex;justify-content: space-between;padding-right: 0.2rem;margin-bottom: 0">人员分布图
                </div>
            </div>
            <div class="renyuan-box4">
                <div class="renyuan-box-title" style="width: 0.5rem;padding: 0;text-align: center">单<br>位<br>考<br>核<br>统<br>计
                </div>
                <div class="gis-table renyuan-box">
                    <table>
                        <thead>
                        <tr>
                            <th style="width: 40%;">单位</th>
                            <th style="width: 20%;">考勤（人）</th>
                            <th style="width: 20%;">出勤（人）</th>
                            <th style="width: 20%;">出勤率（%）</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(p,index) in table" :key="index">
                            <td style="text-align: left;padding-left: 0.2rem;">{{p.name}}</td>
                            <td>{{p.kq}}</td>
                            <td>{{p.cq}}</td>
                            <td>{{(p.cq/p.kq*100).toFixed(2)}}</td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="renyuan-box-right flex-column-center">
            <div class="renyuan-box5 renyuan-box">
                <div class="renyuan-box-title">现场工种</div>
                <echarts id="gongzhong" :option="gongzhong" :styles="gongzhongstyle"></echarts>
                <div class="gis-table renyuan-box">
                    <table>
                        <thead>
                        <tr>
                            <th style="width: 50%;">工种</th>
                            <th style="width: 50%;">现场人数</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(p,index) in table2" :key="index">
                            <td>{{p.name}}</td>
                            <td>{{p.kq}}</td>
                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import GisplusTitle from '@/components/gisplus/GisplusTitle.vue'
    import echarts from '@/components/echarts/echarts.vue'

    export default {
        name: 'GisWiew1',
        data() {
            var lightBlue = {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: 'rgba(41, 121, 255, 1)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(0, 192, 255, 1)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
            }
// 纹理
            var piePane = ''
            var piePatternImg = new Image()
            piePatternImg.src = piePane
            return {
                table: [
                    {
                        name: 'XXXXXXXXXXXXXXXXX',
                        kq: 100,
                        cq: 80
                    },
                    {
                        name: 'XXXXXXXXXXXXXXXXX',
                        kq: 100,
                        cq: 80
                    },
                    {
                        name: 'XXXXXXXXXXXXXXXXX',
                        kq: 100,
                        cq: 80
                    },
                ],
                table2: [
                    {
                        name: '工种1',
                        kq: 100,
                    },
                    {
                        name: '工种2',
                        kq: 100,
                    },
                    {
                        name: '工种3',
                        kq: 100,
                    },
                    {
                        name: '工种4',
                        kq: 100,
                    },
                    {
                        name: '工种5',
                        kq: 100,
                    },
                    {
                        name: '工种6',
                        kq: 100,
                    },
                    {
                        name: '工种7',
                        kq: 100,
                    },
                    {
                        name: '工种8',
                        kq: 100,
                    }
                ],
                cities: [
                    {
                        value: 1,
                        label: '总体'
                    }, {
                        value: 2,
                        label: '白石山隧道'
                    }, {
                        value: 3,
                        label: '新安隧道'
                    }, {
                        value: 4,
                        label: '牙柄隧道'
                    }],
                value6: '总体',
                gongzhong: {
                    // title : {
                    //   text: '南丁格尔玫瑰图',
                    //   subtext: '纯属虚构',
                    //   x:'center'
                    // },
                    color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7292', '#e7bcf3', '#8378ea'],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        x: 'center',
                        y: 'bottom',
                        data: ['工种1', '工种2', '工种3', '工种4', '工种5', '工种6', '工种7', '工种8'],
                        textStyle: {
                            color: '#FFF'
                        }
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            // dataView : {show: true, readOnly: false},
                            magicType: {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    calculable: true,
                    series: [
                        {
                            name: '面积模式',
                            type: 'pie',
                            radius: [30, 110],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            data: [
                                {value: 10, name: '工种1'},
                                {value: 5, name: '工种2'},
                                {value: 15, name: '工种3'},
                                {value: 25, name: '工种4'},
                                {value: 20, name: '工种5'},
                                {value: 35, name: '工种6'},
                                {value: 30, name: '工种7'},
                                {value: 40, name: '工种8'}
                            ]
                        }
                    ]
                },
                gongzhongstyle: {
                    width: '3.5rem',
                    height: '3.5rem',
                    margin: '0 auto'
                },
                renyuan: {
                    tooltip: {
                        trigger: 'item',
                        showDelay: 0,
                        formatter: function (params) {
                            if (params.seriesIndex == 0) {
                                return '授培训人数:' + params.value
                            } else if (params.seriesIndex == 2) {
                                return '总人数:' + params.value
                            }
                        },
                    },
                    grid: {
                        top: '5%',
                        left: '5%',
                        right: '5%',
                        bottom: '20%',
                    },
                    xAxis: {
                        data: ['安全交底', '技术交底', '班前教育'],
                        offset: 15,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            color: '#fff',
                            fontSize: 12
                        }
                    },
                    yAxis: {
                        min: 0,
                        max: 100,
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    series: [{
                        type: 'bar',
                        // label: {
                        //   show: true,
                        //   position: 'top',
                        //   padding: 10,
                        //   color: '#2979ff',
                        //   fontSize: 14,
                        //   formatter: '{c}'
                        // },
                        itemStyle: {
                            color: lightBlue
                        },
                        barWidth: '40%',
                        data: [49, 80, 67],
                        z: 10
                    },
                        {
                            type: 'bar',
                            barGap: '-100%',
                            itemStyle: {
                                color: {
                                    image: piePatternImg,
                                    repeat: 'repeat'
                                },
                                opacity: 0.05
                            },
                            barWidth: '40%',
                            data: [100, 100, 100],
                            z: 5
                        },
                        {
                            type: 'bar',
                            barGap: '-100%',
                            itemStyle: {
                                color: '#feb3c8',
                                opacity: 1
                            },
                            barWidth: '40%',
                            data: [100, 100, 100],
                            z: 5
                        }],
                    // backgroundColor: '#190c12',
                }

            }
        },
        components: {
            echarts, GisplusTitle
        },
        methods: {
            handleCommand(command) {
                console.log(command)
                this.value6 = command
            }
        }
    }
</script>

<style scoped lang="scss">
    .renyuan-bg {
        width: 100%;
        padding: 1.2rem 0.5rem 0.5rem;
        background-image: url('../../assets/img/renyuan-bg.png');
        display: flex;
        justify-content: space-between;

        .renyuan-box-left {
            width: 3.5rem;
        }

        .renyuan-box-mid {
            width: 8rem;
        }

        .renyuan-box-right {
            width: 4rem;
        }
    }

    .renyuan-box {
        background-image: url('../../assets/img/renyuan-box.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .renyuan-box1 {
        width: 100%;
        flex: 3;
    }

    .renyuan-box2 {
        width: 100%;
        flex: 2;
        margin-top: 0.1rem;
    }

    .renyuan-box3 {
        width: 100%;
        flex: 4;
    }

    .renyuan-box4 {
        width: 100%;
        flex: 1;
        margin-top: 0.1rem;
        display: flex;
    }

    .renyuan-box5 {
        width: 100%;
        flex: 1;
    }

    .renyuan-box-title {
        font-size: 0.18rem;
        padding-left: 0.2rem;
        padding-top: 0.1rem;
        font-weight: bold;
        color: #5AC8FA;
        margin-bottom: 0.2rem;
    }

    .gis-table {
        width: 100%;

        table {
            width: 100%;
            height: 0.2rem;
            line-height: 0.2rem;
            font-size: 0.16rem;
            color: #5AC8FA;
            text-align: center;
            border: none;
            border-spacing: 0;
            line-height: 0.4rem;

            thead {
                background: rgba(235, 235, 235, 0.1);
            }

            tbody {
                color: #a0acfa;

                tr:nth-child(2n) {
                    background: rgba(235, 235, 235, 0.1);
                }
            }
        }
    }

    .renyuan-img {
        position: relative;

        img {
            display: block;
            margin: 0 auto;
            width: 1.5rem;
            height: 1.5rem;
        }

        .renyuan-num {
            width: 0.5rem;
            font-size: 0.5rem;
            color: #fff;
            position: absolute;
            top: 10%;
            left: 0;
            right: 0;
            margin: 0 auto;
            font-family: Agency FB;
        }

        .renyuan-text {
            width: 1.20rem;
            font-size: 0.20rem;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            margin: 0 auto;
            text-align: center;
        }
    }

    .el-dropdown-menu {
        background: transparent;
        /*border: none;*/
        .el-dropdown-menu__item {
            color: #F8BC38;
        }
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #F8BC38;
    }
</style>
